<template>
  <div class="Navs">
    <div class="Navs-left">
      <div class="Navs-other Navs-other1">
        <img class="logo" src="../../assets/img/HomePage/menggulogo.png" />
      </div>
      <div class="Navs-title">变电辅助设备监控系统</div>
      <div class="Navs-tab">
        <div
          v-for="(item,index) in listleftdata"
          :key="index"
          @mouseover="listleftdataed=item.name"
          @mouseleave="listleftdataed=''"
          :class="{selected:selectrouter==item.id}"
          @click="select(item)"
        >
          <span>{{ item.name }}</span>
          <el-collapse-transition>
            <tree
              v-show="listleftdataed==item.name"
              @mouseover="listleftdataed=item.name"
              @mouseleave="listleftdataed=''"
              v-if="item.children"
              class="Navs-tree"
              :folder="item.children"
              :CurrentOrg="CurrentOrg"
              :dzLoginName="dzLoginName"
              @Acitve="Acitve"
            />
          </el-collapse-transition>
        </div>
      </div>
    </div>
    <div class="Navs-right">
      <div class="Navs-other">
        <div class="home-logo" @click="tohomepage" :class="{homeselect: selectrouter=='/homepage'}"></div>
        <div
          class="tz-logo"
          :class="{tzselect: selectrouter=='/parametermanagement'}"
          @click="toParameterManagement"
        ></div>
        <div>
          <div class="close-logo" @click="close"></div>
          <!-- <div>内蒙古</div> -->
        </div>
      </div>
    </div>

    <!-- <div class="Navs-tab">
      <div
        v-for="(item,index) in listrightdata"
        :class="{selected:selectrouter==item.path}"
        :key="index"
        @mouseover="listleftdataed=item.name"
        @mouseleave="listleftdataed=''"
        @click="select(item)"
      >
        <span>{{ item.name }}</span>
        <el-collapse-transition>
          <tree
            v-show="listleftdataed==item.name"
            @mouseover="listleftdataed=item.name"
            @mouseleave="listleftdataed=''"
            v-if="item.children"
            class="Navs-tree"
            :folder="item.children"
            :CurrentOrg="CurrentOrg"
            :dzLoginName="dzLoginName"
          />
        </el-collapse-transition>
      </div>
    </div>-->
  </div>
</template>

<script lang="ts">
import { publicAPIModule } from "@/store/modules/public";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import tree from "./tree.vue";
interface listItem {
  path: string;
  name: string;
  id: string;
  children?: listItem[];
  meta?: any;
}
@Component({
  components: { tree },
})
export default class Navs extends Vue {
  public clickActive: boolean = false;
  public listleftdataed: string = "";
  public selectrouter: string = "/homepage";
  public loginName: string = "天气11";
  public listleftdata: listItem[] = [
    {
      path: "/auxiliarymonitor/firefight?code=1500000001&name=220kV天平变电站",
      name: "火灾报警",
      id: "1",
      children: [
        {
          path:
            "/auxiliarymonitor/firefight?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=火灾报警主机&SBID=0101&active=true",
          name: "火灾报警主机",
          id: "1-1",
        },
        {
          path:
            "/auxiliarymonitor/firefight?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=声光报警器&SBID=0110&active=true",
          name: "声光报警器",
          id: "1-2",
        },
        {
          path:
            "/auxiliarymonitor/firefight?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=手动报警器&SBID=0102&active=true",
          name: "手动报警器",
          id: "1-3",
        },
        {
          path:
            "/auxiliarymonitor/firefight?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=烟感探测器&SBID=0109&active=true",
          name: "烟感探测器",
          id: "1-4",
        },
        {
          path:
            "/auxiliarymonitor/firefight?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=感温线缆&SBID=0114&active=true",
          name: "感温线缆",
          id: "1-5",
        },
        {
          path:
            "/auxiliarymonitor/firefight?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=烟雾对射&SBID=0113&active=true",
          name: "烟雾对射",
          id: "1-6",
        },
      ],
    },
    {
      path: "/auxiliarymonitor/entranceAdmin?code=1500000001&name=220kV天平变电站",
      name: "安全警卫",
      id: "2",
      children: [
        {
          path:
            "/auxiliarymonitor/entranceAdmin?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=门禁管理&SBID=0201&active=true",
          name: "门禁管理",
          id: "2-1",
        },
        {
          path:
            "/auxiliarymonitor/security?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=电子围栏&SBID=0202&active=true",
          name: "电子围栏",
          id: "2-2",
        },
        {
          path:
            "/auxiliarymonitor/security?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=红外对射&SBID=0203&active=true",
          name: "红外对射",
          id: "2-3",
        },
        {
          path:
            "/auxiliarymonitor/security?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=红外双鉴&SBID=0204&active=true",
          name: "红外双鉴",
          id: "2-4",
        },
      ],
      // children: [
      //   {
      //     path: "/auxiliarymonitor/firefight",
      //     name: "消防系统",
      //     id: "1-1",
      //   },
      //   {
      //     path: "/auxiliarymonitor/security",
      //     name: "安全防范",
      //     id: "1-4",
      //   },
      //   {
      //     path: "/auxiliarymonitor/ecocrisis",
      //     name: "环境监控",
      //     id: "1-5",
      //   },
      //   {
      //     path: "/auxiliarymonitor/light",
      //     name: "照明控制",
      //     id: "1-3",
      //   },
      //   // {
      //   //   path: "/auxiliarymonitor/drainage",
      //   //   name: "给排水系统",
      //   //   id: "1-2",
      //   // },

      //   {
      //     path: "/auxiliarymonitor/linkage",
      //     name: "联动管理",
      //     id: "1-7",
      //   },

      //   {
      //     path: "/auxiliarymonitor/thresholdvalue",
      //     name: "阈值设置",
      //     id: "1-6",
      //   },
      // ],
    },
    {
      path: "/auxiliarymonitor/ecocrisis?code=1500000001&name=220kV天平变电站",
      name: "气象环境",
      id: "3",
      children: [
        {
          path:
            "/auxiliarymonitor/ecocrisis?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=微气象&SBID=0402&active=true",
          name: "微气象",
          id: "3-1",
        },
        {
          path:
            "/auxiliarymonitor/ecocrisis?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=温湿度传感器&SBID=0401&active=true",
          name: "温湿度传感器",
          id: "3-2",
        },
        {
          path:
            "/auxiliarymonitor/ecocrisis?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=SF6气体浓度传感器&SBID=0406&active=true",
          name: "SF6气体浓度传感器",
          id: "3-3",
        },
        {
          path:
            "/auxiliarymonitor/ecocrisis?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=风机&SBID=0403&active=true",
          name: "风机",
          id: "3-4",
        },
        {
          path:
            "/auxiliarymonitor/ecocrisis?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=空调&SBID=0407&active=true",
          name: "空调",
          id: "3-5",
        },
        {
          path:
            "/auxiliarymonitor/ecocrisis?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=SF6主机&SBID=0409&active=true",
          name: "SF6主机",
          id: "3-6",
        },
        {
          path:
            "/auxiliarymonitor/ecocrisis?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=水浸传感器&SBID=0408&active=true",
          name: "水浸传感器",
          id: "3-7",
        },
        {
          path:
            "/auxiliarymonitor/ecocrisis?stationId=1500000001&code=1500000001&name=220kV天平变电站&type=电缆测温&SBID=0410&active=true",
          name: "电缆测温",
          id: "3-8",
        },
        {
          path: "/auxiliarymonitor/light",
          name: "照明控制",
          id: "1-3",
        },
      ],
    },
    {
      // path: "/onlinemonitor",
      path: "/onlinemonitor/OilColor?code=1500000001&name=220kV天平变电站",
      name: "在线监测",
      id: "4",
      children: [
        {
          path: "/onlinemonitor/OilColor?code=1500000001&name=220kV天平变电站",
          name: "油色谱",
          id: "4-1",
        },
        {
          path: "/onlinemonitor/IronCore?code=1500000001&name=220kV天平变电站",
          name: "铁芯接地电流",
          id: "4-2",
        },
        // {
        //   path: "/onlinemonitor/OpticalFiber",
        //   name: "主变光纤测温",
        //   id: "4-4",
        // },
        {
          path:
            "/onlinemonitor/SurgeArrester?code=1500000001&name=220kV天平变电站",
          name: "避雷器监测",
          id: "4-3",
        },
        // {
        //   path: "/onlinemonitor/Voiceprint",
        //   name: "声纹振动",
        //   id: "4-6",
        // },
        // {
        //   path: "/onlinemonitor/SwitchCabinet",
        //   name: "开关柜测温",
        //   id: "4-7",
        // },
        // {
        //   path: "/onlinemonitor/SF6",
        //   name: "SF6压力监测",
        //   id: "4-9",
        // },
        // {
        //   path: "/onlinemonitor/HGIS",
        //   name: "GIS局放",
        //   id: "4-10",
        // },
        {
          path: "/onlinemonitor/GYTGZHJC?code=1500000001&name=220kV天平变电站",
          name: "高压套管",
          id: "4-4",
        },
        {
          path: "/onlinemonitor/ZBJF?code=1500000001&name=220kV天平变电站",
          name: "主变局放",
          id: "4-5",
        },
        // {
        //   path: "/onlinemonitor/YZFJKGJC",
        //   name: "有载分接开关",
        //   id: "2-12",
        // },

        // {
        //   path: "/onlinemonitor/Mechanical",
        //   name: "机械特性",
        //   id: "2-3",
        // },

        // {
        //   path: "/onlinemonitor/N2",
        //   name: "N2压力监测",
        //   id: "2-8",
        // },

        // {
        //   path: "/onlinemonitor/YWYWJC",
        //   name: "主变瓦斯油位",
        //   id: "2-11",
        // },
        // {
        //   path: "/onlinemonitor/XDC",
        //   name: "蓄电池",
        //   id: "2-12",
        // },
      ],
    },
    // {
    //   // path: "/locks",
    //   path: "",
    //   name: "锁具管理",
    //   id: "5",
    //   children: [
    //     {
    //       path: "/locks/KeyBoxPage?code=1500000001&name=220kV天平变电站",
    //       name: "五防钥匙箱",
    //       id: "5-1",
    //     },
    //     {
    //       path: "/locks/EntranceGuardPage?code=1500000001&name=220kV天平变电站",
    //       name: "门禁控制",
    //       id: "5-2",
    //     },
    //     {
    //       path: "/locks/LockControlPage?code=1500000001&name=220kV天平变电站",
    //       name: "智能锁控",
    //       id: "5-3",
    //     },
    //     {
    //       path: "/locks/KeyLinksPage?code=1500000001&name=220kV天平变电站",
    //       name: "一匙通",
    //       id: "5-4",
    //     },
    //   ],
    // },
    {
      // path: "/videomonitor",
      path: "/videomonitor/EquipmentPanoramic",
      name: "图像监视",
      id: "6",
      children: [
        {
          path: "/videomonitor/EquipmentPanoramic",
          name: "实时监视",
          id: "6-1",
        },
        {
          path: "/videomonitor/CameraDistribution",
          name: "摄像机分布图",
          id: "6-2",
        },
        {
          path: "/videomonitor/IntelligentAnalysis",
          name: "智能分析",
          id: "6-3",
        },
        {
          path: "/videomonitor/VideoPlayback",
          name: "录像回放",
          id: "6-4",
        },
        {
          path: "/videomonitor/VideoDownload",
          name: "录像下载",
          id: "6-5",
        },
        {
          path: "/videomonitor/ViodeoPlan",
          name: "录像计划",
          id: "6-6",
        },
      ],
    },
    {
      // path: "/jointInspection",
      path: "/jointInspection/plan",
      name: "智能巡检",
      id: "7",
      children: [
        {
          path: "/jointInspection/plan",
          name: "巡检计划",
          id: "7-1",
        },
        // 非一级页面，而是巡检计划列表里的跟踪，跳转过来的
        // {
        //   path: "/jointInspection/inspectionmonitor",
        //   name: "巡检监控",
        //   id: "7-1",
        // },
        {
          path: "/jointInspection/inspectionreport",
          name: "巡检报告",
          id: "7-2",
        },

        // {
        //   path: "/jointInspection/inspectiondevice",
        //   name: "巡检装置",
        //   id: "7-3",
        // },
        {
          path: "/jointInspection/task",
          name: "任务管理",
          id: "7-3",
        },
        // {
        //   path: "/jointInspection/posimanagement",
        //   name: "巡检点位管理",
        //   id: "7-4",
        // },
        {
          path: "/jointInspection/cardmanagement",
          name: "巡视卡管理",
          id: "7-6",
        },
        // {
        //   path: "/jointInspection/robotdeployment",
        //   name: "机器人调配",
        //   id: "7-7",
        // },
        // 非一级页面，而是巡检计划列表里的跟踪，跳转过来的
        // {
        //   path: "/jointInspection/abnormalstatistics",
        //   name: "异常总览",
        //   id: "7-8",
        // },
        // {
        //   path: "/jointInspection/defectmanagement",
        //   name: "缺陷管理",
        //   id: "7-9",
        // },
        {
          path: "/jointInspection/analyzingResultsInspection",
          name: "巡检结果对比",
          id: "7-5",
        },
        // {
        //   path: "/jointInspection/stationdetail",
        //   name: "变电站覆盖详情",
        //   id: "5-11",
        // },
      ],
    },
    // {
    //   path: "/warningtosolve",
    //   name: "预警决策",
    //   id: "6",
    //   children: [
    //     {
    //       // path: "/warningtosolve/duty",
    //       path: "/warningtosolve/dutysecond",
    //       name: "主变负载",
    //       id: "6-0",
    //     },
    //     {
    //       path: "/warningtosolve/onlie",
    //       name: "在线监测",
    //       id: "6-1",
    //     },
    //     {
    //       path: "/warningtosolve/charg",
    //       name: "带电检测",
    //       id: "6-2",
    //     },
    //     {
    //       path: "/warningtosolve/countermeasures",
    //       name: "十八项反措",
    //       id: "6-3",
    //     },
    //     {
    //       path: "/warningtosolve/defects",
    //       name: "缺陷",
    //       id: "6-4",
    //     },
    //     {
    //       path: "/warningtosolve/danger",
    //       name: "隐患",
    //       id: "6-5",
    //     },
    //     {
    //       path: "/auxiliarymonitor/linkage",
    //       name: "智能联动",
    //       id: "6-6",
    //     },
    //     {
    //       path: "/edit",
    //       name: "可视化编辑器",
    //       id: "6-7",
    //     },
    //   ],
    // },
    // {
    //   path: "/parametermanagement",
    //   name: "台账管理",
    // },
    {
      path: "/auxiliarymonitor/thresholdvalue",
      name: "系统配置",
      id: "8",
      children: [
        {
          path: "/auxiliarymonitor/thresholdvalue",
          name: "阀值设置",
          id: "8-1",
        },
        {
          path: "/auxiliarymonitor/linkage",
          name: "联动管理",
          id: "8-2",
        },
        {
          path: "/edit",
          name: "可视化编辑器",
          id: "8-3",
        },
        // {
        //   path: "/SystemManagement",
        //   name: "用户管理",
        //   id: "8-4",
        // },
        {
          path: "/parametermanagement/index",
          name: "台账管理",
          id: "8-5",
        },
        {
          path: "/netManageMent",
          name: "网络管理",
          id: "8-6",
        },
      ],
    },
  ];
  public select(item: any): void {
    // if (item.name === "视频监控") {
    //   const routeOne: any = this.$router.resolve({
    //     name: "EquipmentPanoramic",
    //     query: {},
    //   });
    //   // console.log("routeOne.href:", routeOne.href);
    //   window.open(routeOne.href);
    // } else {
    //   this.$router.push({ path: item.path });
    // }
    this.selectrouter = item.id;
    console.log("item", item);
    // console.log("item", this.selectrouter);
    var tabId = JSON.stringify(item.id);
    window.sessionStorage.setItem("tabId", tabId);
    // window.localStorage.setItem('tabId',tabId)
    this.$router.push({ path: item.path });
  }
  public tohomepage(): void {
    this.selectrouter = "/homepage";
    window.sessionStorage.setItem("tabId", "/homepage");
    this.$router.push({ path: "/homepage" });
  }
  public toParameterManagement(): void {
    this.selectrouter = "/parametermanagement";
    window.sessionStorage.setItem("tabId", "/parametermanagement");
    this.$router.push({ path: "/parametermanagement" });
  }
  public close(): void {
    var storage = window.localStorage;
    storage.setItem("userinf", "");
    publicAPIModule.init();
    this.$emit("close");
    this.$router.push({ path: "/login" });
  }
  Acitve(id) {
    this.selectrouter = id;
  }
  @Watch("$route", { deep: true })
  public routechange(to: any, from: any) {
    // this.selectrouter = "/" + to.path.split("/")[1];
    // this.selectrouter =   "/" + to.path.split("/")[1] + "/" + to.path.split("/")[2];
    console.log(to);
    console.log(this.selectrouter);

    // this.selectrouter= to.id.split(1)
  }

  // 当前地市信息
  private CurrentOrg: any = {};
  // 地市名
  private dzLoginName: string = "";

  private init() {
    // 获取当前地市
    (this as any).$services
      .getCurrentOrg({
        method: "get",
        data: {},
      })
      .then((result: any) => {
        // console.log("当前地市:", result);
        this.CurrentOrg = result.data;
        this.getdzLoginName(this.CurrentOrg.SSDSBM);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 获取dzLoginName
  private getdzLoginName(ssdsBm) {
    switch (ssdsBm) {
      case "8a1ea5c64bdebad1014bdebc55c80318":
        this.dzLoginName = "8210180073A";
        break; //威海
      case "8a1ea5c64bdebad1014bdebc5c2104ea":
        this.dzLoginName = "890720535XA";
        break; //莱芜
      case "8a1ea5c64bdebad1014bdebc6047087b":
        this.dzLoginName = "8908257519A";
        break; //省检修
      case "8a1ea5c64bdebad1014bdebc5c21078c":
        this.dzLoginName = "7206100035A";
        break; //泰安
      case "8a1ea5c64bdebad1014bdebc55c80003":
        this.dzLoginName = "7302120039A";
        break; //济南
      case "8a1ea5c64bdebad1014bdebc55c80270":
        this.dzLoginName = "8702014019A";
        break; // 淄博
      case "8a1ea5c64bdebad1014bdebc55c80079":
        this.dzLoginName = "6606036718A";
        break; //青岛
      case "8a1ea5c64bdebad1014bdebc55c803a2":
        this.dzLoginName = "8009210031A";
        break; //烟台
      case "8a1ea5c64bdebad1014bdebc5c210469":
        this.dzLoginName = "8212030011A";
        break; //济宁
      case "8a1ea5c64bdebad1014bdebc6047083c":
        this.dzLoginName = "8110182437A";
        break; //滨州
      case "8a1ea5c64bdebad1014bdebc5c210656":
        this.dzLoginName = "8511094831A";
        break; //临沂
      case "8a1ea5c64bdebad1014bdebc5c21040c":
        this.dzLoginName = "9411111218A";
        break; //菏泽
      case "8a1ea5c64bdebad1014bdebc604707ec":
        this.dzLoginName = "7110134047A";
        break; //德州
      case "8a1ea5c64bdebad1014bdebc5c21073c":
        this.dzLoginName = "7110110813A";
        break; //东营
      case "8a1ea5c64bdebad1014bdebc5c2105ef":
        this.dzLoginName = "6710293010A";
        break; //聊城
      case "8a1ea5c64bdebad1014bdebc5c2106cc":
        this.dzLoginName = "7511262974A";
        break; //日照
      case "8a1ea5c64bdebad1014bdebc55c80162":
        this.dzLoginName = "6911192217A";
        break; //潍坊
      case "8a1ea5c64bdebad1014bdebc5c21053d":
        this.dzLoginName = "840115183XA";
        break; //枣庄
      case "":
        ssdsBm = "8a1ea5c64bdebad1014bdebc4cbf0001";
        this.dzLoginName = "wangnaide";
        break; //省公司
    }
  }

  created() {
    this.init();
    // 右上角的用户信息
    var storage = window.localStorage;
    var loginName1 = storage.getItem("userinf");
    // var aa = storage.getItem("Authority");

    loginName1 = JSON.parse(loginName1);
    this.loginName = (loginName1 as any).username;
  }
  mounted() {
    var tabsId = window.sessionStorage.getItem("tabId");
    this.selectrouter = tabsId;
  }
}
</script>

<style lang="scss" scoped>
.Navs {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 0.88rem;
  margin-top: 0.05rem;
  background-size: 100% 100%;
  background-position: center;
  align-items: center;
  .Navs-left {
    width: 75%;
    display: flex;
    align-items: center;
  }
  .Navs-right {
    width: 25%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    // justify-content: center;
  }
  .Navs-title {
    width: 3.3rem;
    height: 0.5rem;
    line-height: 0.5rem;
    // margin-top: 0.2rem;
    margin: 0 0.1rem;
    font-size: 0.3rem;
    color: #00e4ff;
    text-align: center;
    font-weight: 700;
    background-image: linear-gradient(#0e2162, #002e89);
  }
  .Navs-tab {
    display: flex;
    // margin-top: 0.2rem;
    position: relative;
    width: 9rem;
    justify-content: space-between;
    > div {
      cursor: pointer;
      width: 1.38rem;
      height: 0.54rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: 100% 100%;
      background-position: center;
      background-image: url("../../assets/img/HomePage/nor_cd.png");
      &:hover {
        background-image: url("../../assets/img/HomePage/cli_cd.png");
        > span {
          color: rgba(250, 250, 250, 1);
        }
      }
      font-size: 0.18rem;
      > span {
        color: rgba(250, 250, 250, 0.9);
        // animation: changecolor 5s linear infinite;
        transition: all 0.3s linear 0.2s;
      }
    }

    .Navs-tree {
      position: absolute;
      top: 0.54rem;
      background: rgba(11, 33, 33, 0.6);
      > div {
        z-index: 999999;
      }
    }
  }

  .Navs-other {
    width: 2.2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .logo {
      width: 0.7rem;
      height: 0.7rem;
    }
    .home-logo {
      // margin-top: 0.2rem;
      width: 0.35rem;
      height: 0.37rem;
      background-size: 100% 100%;
      background-position: center;
      background-image: url("../../assets/img/HomePage/nor_sy.png");
      cursor: pointer;
    }
    .tz-logo {
      // margin-top: 0.2rem;
      width: 0.35rem;
      height: 0.37rem;
      background-size: 100% 100%;
      background-position: center;
      background-image: url("../../assets/img/HomePage/tz.png");
      cursor: pointer;
    }
    .close-logo {
      width: 0.3rem;
      height: 0.3rem;
      background-size: 100% 100%;
      background-position: center;
      background-image: url("../../assets/img/HomePage/close.png");
      cursor: pointer;
    }
    .homeselect {
      width: 0.35rem;
      height: 0.37rem;
      background-image: url("../../assets/img/HomePage/nor_sy_slect.png");
    }
    .tzselect {
      background-image: url("../../assets/img/HomePage/tz-select.png");
    }
  }
  .Navs-other1 {
    width: 1rem;
  }
  @keyframes changecolor {
    0% {
      color: rgba(250, 250, 250, 1);
    }
    100% {
      color: rgba(250, 250, 250, 0.9);
    }
  }
}
.selected {
  background-image: url("../../assets/img/HomePage/cli_cd.png") !important;
}
</style>